
<template>
  <div v-if="showTip" class="browser-tip_wrap">
    <i class="el-icon-close" @click="showTip = false" />
    <ul class="content-wrap">
      <div class="tip-t">
        <p>检测到您正在使用ie内核浏览器访问本系统</p>
        <p>使用过程中可能会出现一些兼容性等问题</p>
        <p>
          为了您的用户体验及系统流畅性,建议您切换至
          <span>极速模式</span>
          或
          <span>点击下方链接</span>
          更换最新浏览器
        </p>
      </div>
      <li v-for="(item, index) in browserList" :key="index">
        <a :href="item.url" target="_blank">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTip: true,
      browserVisible: false,
      browserList: [
        {
          url: 'http://chorm.sdswrj.cn/browser.html',
          title: '谷歌浏览器'
        },
        {
          url: 'https://browser.360.cn/ee/',
          title: '360极速浏览器'
        },
        {
          url: 'https://www.microsoft.com/zh-cn/edge',
          title: 'Microsoft Edge浏览器'
        }
      ]
    };
  }
};
</script>

<style lang="scss">
@keyframes showTipDia {
  0%{opacity: 0;right: -300px;}
  100%{opacity: 1;right: 0;}
}
.browser-tip_wrap {
  animation: showTipDia 1.5s;
  width: 300px;
  overflow: hidden;
  padding: 30px 12px 15px;
  position: fixed;
  right: 0;
  top: 0;
  background: #fff;
  z-index: 99999;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  .el-icon-close{
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 20px;
    cursor: pointer;
  }
  .content-wrap {
    .tip-t {
      padding-bottom: 20px;
      span {
        color: #109ad8;
      }
    }
    li {
      line-height: 30px;
      font-size: 16px;
      color: #109ad8;
      &:hover {
        text-decoration: underline;
      }
    }
    p {
      line-height: 22px;
      font-size: 14px;
      margin: 0;
    }
  }
}
</style>
